<!DOCTYPE html>
<html>
	<head>
		<!-- 4.制作4个嵌套DIV ，要求：
		      1.每个父DIV尺寸必须大于子DIV
		      2.实现每个DIV在父DIV正中间
		      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		      4.通过最底层DIV，打印每层父DIV，如：
			1级父元素为（），1级父节点为（）
			2级父元素为（），2级父节点为（）
			....
		      5.查找每个DIV的子元素和子对象 -->
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				#div_id_one {
					background-color:#55bdc8;
					width: 500px;
					height: 500px;
					border: 2px solid #55aa7f;
				}
		
				#div_id_two {
					width: 350px;
					height: 350px;
					background-color:#00ffff;
		
				}
		
				#div_id_three {
					width: 200px;
					height: 200px;
					background-color:#aaaaff;
		
				}
		
				#div_id_four {
					width: 70px;
					height: 70px;
					background-color: #55aaff;
		
				}
		
				div {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
		
				}
			</style>
	</head>
	<body>
		
				<div id="div_id_one">
					<span>div_id_one_span</span>
					<div id="div_id_two">
						<p>div_id_one_p</p>
							<button id="b_console_log_children">打印每层子DIV</button>
						<div id="div_id_three">
							<a>div_id_one_a</a>
							<button id="b_console_log_parent">打印每层父DIV</button>
							<div id="div_id_four">
								<img src="img/pic.jpg" style="width: 70px; height: 70px;">
							</div>
						</div>
					</div>
				</div>
	</body>
	<script>
			function getParent(){
				console.log("S 打印每层父DIV ")
				console.log("1级父元素为")
				console.log(document.getElementById("div_id_four").parentElement);
				console.log("1级父节点为")
				console.log(document.getElementById("div_id_four").parentNode);
				
				console.log("2级父元素为")
				console.log(document.getElementById("div_id_four").parentElement.parentElement);
				console.log("2级父节点为")
				console.log(document.getElementById("div_id_four").parentNode.parentNode);
				
				console.log("3级父元素为")
				console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement);
				console.log("3级父节点为")
				console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode);
				
				console.log("4级父元素为")
				console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement);
				console.log("4级父节点为")
				console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode);
				
				console.log("5级父元素为")
				console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement.parentElement);
				console.log("5级父节点为")
				console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode.parentNode);
				
				console.log("6级父元素为")
				console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
				console.log("6级父节点为")
				console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
			
				console.log("E 打印每层父DIV ")
			}
			document.getElementById("b_console_log_parent").onclick=getParent;
			
				function getChildren(){
					console.log("S 打印每层子DIV ")
					console.log("div_id_one级子元素为")
					console.log(document.getElementById("div_id_one").children);
					console.log("div_id_one级子节点为")
					console.log(document.getElementById("div_id_one").childNodes);
					console.log("div_id_two级子元素为")
					console.log(document.getElementById("div_id_two").children);
					console.log("div_id_two级子节点为")
					console.log(document.getElementById("div_id_two").childNodes);
					console.log("div_id_three级子元素为")
					console.log(document.getElementById("div_id_three").children);
					console.log("div_id_three级子节点为")
					console.log(document.getElementById("div_id_three").childNodes);
					console.log("div_id_four级子元素为")
					console.log(document.getElementById("div_id_four").children);
					console.log("div_id_four级子节点为")
					console.log(document.getElementById("div_id_four").childNodes);
					console.log("E 打印每层子DIV ")
				}
				document.getElementById("b_console_log_children").onclick=getChildren;
		</script>
</html>
